import React,{useEffect,useState} from "react";
import '../Cate/Cate.css'
import { ShoppingCartOutlined } from '@ant-design/icons';
import { Space } from 'antd';
import { useNavigate } from "react-router-dom";
import axios from "axios";
axios.defaults.baseURL = "http://127.0.0.1:3000"
export default function Cate(){
    const [list,setList] = useState([])
    const [cate,setCate] = useState([])
    const [itemIndex,setItemIndex] = useState('')
    let c = ''
    const Navigate = useNavigate()
    // console.log(list);
    

    const getList = async() => {
        let {data:{code,list}}=await axios.get('/sUnJIahuI/list',{params:{cate:c}})
        if(code === 200){
            setList(list)
        }
    }

    const getCate = async() => {
        let {data:{code,cate}}=await axios.get('/sUnJIahuI/cate')
        if(code === 200){
            setCate(cate)
        }
    }

    const to = (_id,name,imgs,store,xiao,Sincerely,specs,price,img,stock,count) => {
        console.log(imgs);
        Navigate(`/Edit?_id=${_id}&name=${name}&EditImg=${imgs}&store=${store}
            &xiao=${xiao}&Sincerely=${Sincerely}&specs=${specs}&price=${price}
            &img=${img}&stock=${stock}&count=${count}`)
    }

    useEffect(()=>{
        getList()
        getCate()
    },[])

    return(
        <>
            <div>
                <div className="topBox">
                    <span className="topBoxText">商品分类</span>
                </div>
                <div className="CateBox">
                    {
                        cate.map((item,index)=>{
                            return (
                            <div key={item._id}
                            style={{ fontSize:"2.1vh",width:"27vw",height:"6vh",
                                textAlign:"center",lineHeight:"6vh"
                            }}
                            className={ itemIndex === index ? 'active-c':'' }
                            onClick={() => {
                                c = item._id
                                setItemIndex(index)
                                getList()
                            }}
                            >{item.name}</div>
                            )
                        })
                    }
                </div>
                <div className="ListBox">
                    {
                        list.map((item)=>{
                            return <div key={item._id} className="ListContentBox">
                                <div><img src={item.img} width={"90vw"} height={"90vh"}></img></div>
                                <div className="listTextBox">
                                    <p className="ListName">{item.name}</p>
                                    <p className="text"><span className="text1">AB级花材</span>
                                    <button className="text2">78包邮</button></p>
                                    <p className="ListPrice">￥{item.price}</p>
                                    <div className="shopBox" onClick={()=>
                                        {to(item._id,item.name,item.imgs,item.store,item.xiao,
                                            item.Sincerely,item.specs,item.price,item.img,item.stock,
                                            item.count)
                                        }}>
                                        <Space>
                                            <ShoppingCartOutlined />
                                        </Space>
                                    </div>
                                </div>
                            </div>
                        })
                    }
                </div>
            </div>
        </>
    )
}